<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
  <script src="vue.js"></script>
</head>
<body>
<!--作用域插槽  当子组件使用循环，或者某一部分它的DOM结构应该由外部传递进来的时候
 <template slot-scope="props"></template>必须条件 slot-scope插槽作用域   props自定义
 :itt=item  itt也是自定义-->
<div id="app">
    <child>
          <template slot-scope="props">
              <h1>{{props.itt}}</h1>
          </template>
    </child>
</div>
<script>
  Vue.component('child',{
     data:function(){
        return{
           list:[1,2,3,4]
        }
     },
     template:'<div>' +
                  '<slot v-for="item of list" :itt=item></slot>' +
              '</div>'
  })
  var vm=new Vue({
    el:"#app"
  })
</script>
</body>
</html>
